// 没有懒加载的引入方式:
// import Home from './pages/Home'
// import About from './pages/About'
// import News from './pages/News'
// import Message from './pages/Message'
// import Detail from './pages/Detail'

import React, { Suspense } from 'react'
// 懒加载的引入方式
// 注意: 并不是所有的组件都要懒加载.一般只有路由组件(页面)需要懒加载
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
const News = React.lazy(() => import('./pages/News'))
const Message = React.lazy(() => import('./pages/Message'))
const Detail = React.lazy(() => import('./pages/Detail'))
// 注意: 一旦组件使用了懒加载,react就要求我们必须处理懒加载组件中可能出现的短暂的白屏问题.并给我们提供的对应的解决办法.在React包中提供了一个组件,叫做Suspense组件可以在白屏的时候给用户展示一个加载效果

// 由于上面的路由组件都实现了懒加载,按照react要求,每一个懒加载的组件必须被Suspense包裹,所以为了方便,定义一个函数

function load(Comp) {
  return (
    <Suspense
      fallback={<div style={{ color: 'red', fontSize: 30 }}>loading....</div>}
    >
      <Comp></Comp>
    </Suspense>
  )
}
export default [
  {
    path: '/',
    element: load(Home),
    children: [
      {
        path: '/news',
        element: load(News),
      },
      {
        path: '/message',
        element: load(Message),
        children: [
          {
            path: '/message/detail',
            children: [
              {
                path: '/message/detail/:id',
                element: load(Detail),
              },
              {
                path: '/message/detail',
                element: load(Detail),
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: '/about',
    element: load(About),
  },
]
